<ion-modal-view class="modal-full-height">

  <ion-header-bar class="bar-positive">

    <button class="button button-clear visible-xs"
            ng-if="!slides.slider.activeIndex"
            ng-click="closeModal()" translate>COMMON.BTN_CANCEL
    </button>
    <button class="button button-icon button-clear icon ion-ios-arrow-back buttons header-item"
            ng-click="slidePrev()"
            ng-if="slides.slider.activeIndex">
    </button>

    <h1 class="title hidden-xs" translate>ACCOUNT.SECURITY.TITLE</h1>

    <button class="button button-clear icon-right visible-xs"
            ng-if="!isLastSlide && slides.slider.activeIndex > 0"
            ng-click="doNext()">
      <span translate>COMMON.BTN_NEXT</span>
      <i class="icon ion-ios-arrow-right"></i>
    </button>
    <button class="button button-positive button-icon button-clear icon ion-android-done visible-xs"
            ng-click="doNext()"
            ng-if="isLastSlide && option === 'saveID'">
    </button>
  </ion-header-bar>


    <ion-slides options="slides.options" slider="slides.slider">

      <!-- STEP 1 -->
      <ion-slide-page>
        <ion-content class="has-header padding">

          <div class="list">

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
                 ng-click="selectOption('recoverID')" ng-if="!login">
              <div class="item-content item-text-wrap">
                <i class="item-image dark icon ion-person"></i>
                <b class="ion-ios-undo icon-secondary dark" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <h2 translate>ACCOUNT.SECURITY.RECOVER_ID</h2>
                <h4 class="gray" translate>ACCOUNT.SECURITY.RECOVER_ID_HELP</h4>
                <i class="icon dark ion-ios-arrow-right"></i>
              </div>
            </div>

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
                 ng-click="selectOption('revocation')" ng-if="!login">
              <div class="item-content item-text-wrap">
                <i class="item-image dark icon ion-person"></i>
                <b class="ion-close icon-secondary dark" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <h2 translate>ACCOUNT.SECURITY.REVOCATION_WITH_FILE</h2>
                <h4 class="gray" translate>ACCOUNT.SECURITY.REVOCATION_WITH_FILE_DESCRIPTION</h4>
                <i class="icon dark ion-ios-arrow-right"></i>
              </div>
            </div>

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink hidden-xs"
                 ng-click="selectOption('saveID')" ng-if="login && !$root.device.enable">
              <div class="item-content item-text-wrap">
                <i class="item-image dark icon ion-person"></i>
                <b class="ion-ios-redo icon-secondary dark" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <b class="ion-locked icon-secondary dark" style="top: 0px; left: 40px; font-size: 8px;"></b>
                <h2 translate>ACCOUNT.SECURITY.SAVE_ID</h2>
                <h4 class="gray" translate>ACCOUNT.SECURITY.SAVE_ID_HELP</h4>
                <i class="icon dark ion-ios-arrow-right"></i>
              </div>
            </div>

            <!-- keyfile generation (hidden if device enable, because we do not known were the file is stored) -->
            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink hidden-xs"
                 ng-click="selectOption('generateKeyfile')" ng-if="login && !$root.device.enable">
              <div class="item-content item-text-wrap">
                <i class="item-image dark icon ion-document-text"></i>
                <b class="ion-key icon-secondary dark" style="top: -8px; left: 42px; font-size: 12px;"></b>
                <h2 translate>ACCOUNT.SECURITY.GENERATE_KEYFILE</h2>
                <h4 class="gray" translate>ACCOUNT.SECURITY.GENERATE_KEYFILE_HELP</h4>
                <i class="icon dark ion-ios-arrow-right"></i>
              </div>
            </div>

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink hidden-xs hidden-sm"
                 ng-click="downloadRevokeFile()" ng-if="canRevoke && !$root.device.enable">
              <div class="item-content item-text-wrap">
                <i class="item-image dark icon ion-person"></i>
                <b class="ion-ios-redo icon-secondary dark" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <b class="ion-close icon-secondary dark" style="top: 0px; left: 40px; font-size: 8px;"></b>
                <h2 translate>ACCOUNT.SECURITY.DOWNLOAD_REVOKE</h2>
                <h4 class="gray" translate>ACCOUNT.SECURITY.DOWNLOAD_REVOKE_HELP</h4>
                <i class="icon dark ion-android-archive"></i>
              </div>
            </div>

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
                 ng-click="self()" ng-if="needSelf">
              <div class="item-content item-text-wrap">
                <i class="item-image icon ion-person dark"></i>
                <b class="ion-flag icon-secondary dark" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <h2 translate>ACCOUNT.SECURITY.SEND_IDENTITY</h2>
                <h4 class="gray" ng-bind-html="::'ACCOUNT.SECURITY.SEND_IDENTITY_HELP' | translate"></h4>
              </div>
            </div>

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
                 ng-click="membershipIn()" ng-if="needMembership">
              <div class="item-content item-text-wrap">
                <i class="item-image icon ion-person dark"></i>
                <b class="ion-plus icon-secondary dark" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <h2 translate>ACCOUNT.SECURITY.MEMBERSHIP_IN</h2>
                <h4 class="gray" ng-bind-html="::'ACCOUNT.SECURITY.MEMBERSHIP_IN_HELP' | translate"></h4>
              </div>
            </div>

            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
                 ng-click="revokeWalletIdentity()" ng-if="canRevoke">
              <div class="item-content item-text-wrap">
                <i class="item-image icon ion-person assertive-900"></i>
                <b class="ion-close icon-secondary assertive-900" style="top: -8px; left: 39px; font-size: 12px;"></b>
                <h2 translate>ACCOUNT.SECURITY.REVOCATION_WALLET</h2>
                <h4 class="gray" translate>ACCOUNT.SECURITY.REVOCATION_WALLET_HELP</h4>
              </div>
            </div>
          </div>

          <div class="padding hidden-xs text-right">
            <button class="button button-clear button-dark ink" ng-click="closeModal()"
                    type="button" translate>COMMON.BTN_CANCEL
            </button>
          </div>
        </ion-content>
      </ion-slide-page>

      <ion-slide-page ng-if="option == 'revocation'">
        <ng-include src="'templates/wallet/slides/slides_revocation_file.html'"></ng-include>
      </ion-slide-page>

      <ion-slide-page ng-if="login && option == 'saveID'">
        <ng-include src="'templates/wallet/slides/slides_saveID_1.html'"></ng-include>
      </ion-slide-page>
      <ion-slide-page ng-if="login && option == 'saveID'">
        <ng-include src="'templates/wallet/slides/slides_saveID_2.html'"></ng-include>
      </ion-slide-page>

      <ion-slide-page ng-if="option == 'recoverID'">
        <ng-include src="'templates/wallet/slides/slides_recoverID_1.html'"></ng-include>
      </ion-slide-page>
      <ion-slide-page ng-if="option == 'recoverID'">
        <ng-include src="'templates/wallet/slides/slides_recoverID_2.html'"></ng-include>
      </ion-slide-page>
      <ion-slide-page ng-if="option == 'recoverID'">
        <ng-include src="'templates/wallet/slides/slides_recoverID_3.html'"></ng-include>
      </ion-slide-page>

      <ion-slide-page ng-if="login && option == 'generateKeyfile'">
        <ng-include src="'templates/wallet/slides/slides_generate_keyfile.html'"></ng-include>
      </ion-slide-page>

    </ion-slides>
</ion-modal-view>
